<template>
	<view class="bigbox">
		<view class="content">
			<view class="top-box">
				<view class="top">
				</view>
			</view>
			<view class="bottom-box">
				<view class="bottom">
					<view class="table">
						<table>
							<tr v-for="item in list" :key="item.id">
								<td>
									<view class="icon">
										<image class="icon-image" :src="item.src" :alt="item.id"></image>
										{{ item.name }}
									</view>
								</td>
								<td id="con">
									{{ item.content }}
								</td>
							</tr>
						</table>
					</view>
				</view>
			</view>
			<view class="fenge-box">
				<view class="fenge"></view>
			</view>
			<view class="button-box">
				<view class="button">
					<view>
						<button @click="LogOut">退出登录</button>
					</view>
					<view class="fenge-box">
						<view class="fenge"></view>
					</view>
					<view>
						<button @click="Uni('/pages/index')">返回主页面</button>
					</view>
				</view>
			</view>
			<view class="touxiang-box">
				<view class="touxiang">
					<image class="image" :src="ava" mode=""></image>
					<text>{{list[0].content}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		getUserProfile
	} from "../../api/system/user"
	import config from '@/config';
	import {
		userStore
	} from "../../store/index";
	const baseUrl = config.baseUrl;
	//数据
	const list = ref([{}]);
	const ava = ref("");
	getUserProfile().then(userProfile => {
		console.log(userProfile);
		// 数据赋值
		list.value = [{
				id: 1,
				name: "昵称：",
				content: userProfile.data.userName, // 确保数据格式正确
				src: "../../static/icon/nicheng.png"
			},
			{
				id: 2,
				name: "手机号码：",
				content: userProfile.data.phonenumber,
				src: "../../static/icon/phone.png"
			},
			{
				id: 3,
				name: "用户邮箱：",
				content: userProfile.data.email,
				src: "../../static/icon/mailbox.png"
			},
			{
				id: 5,
				name: "所属角色：",
				content: userProfile.roleGroup,
				src: "../../static/icon/juese.png"
			},
			{
				id: 6,
				name: "创建日期：",
				content: userProfile.data.createTime,
				src: "../../static/icon/date.png"
			},
			{
				id: 7,
				name: "性别：",
				content: userProfile.data.phonenumber,
				src: "../../static/icon/gender.png"
			}
		];
		console.log(baseUrl + userProfile.data.avatar)
		ava.value = baseUrl + userProfile.data.avatar;
	});

	function LogOut() {
		uni.showModal({
			// 询问用户是否退出登录
			title: '退出登录',
			content: '您确定要退出登录吗?',
			success: res => {
				if (res.confirm) {
					//确定退出拿到token并清除token
					let TOKEN = uni.getStorageSync('user');
					uni.clearStorageSync();
					//退出成功！并跳转到其他页面
					uni.showToast({
						title: '退出成功',
						icon: 'none',
					});
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index',
						});
					}, 1500);
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			},
		});
	}

	function Uni(url2) {
		uni.navigateTo({
			url: url2
		})
	}
</script>

<style lang="scss" scoped>
	p,
	view,
	text,
	img {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.bigbox {
		height: 667px;

		.content {
			.top-box {
				.top {
					width: 100%;
					height: 331rpx;
					background: #4CAF50;
					background-image: url(../../static/image/background.png);
					background-size: cover;
					/* 完全覆盖容器 */
					background-position: bottom;
					/* 居中显示 */
					background-repeat: no-repeat;
					/* 禁止重复 */
				}
			}

			.bottom-box {
				margin-top: 120rpx;
				padding: 0 50rpx 20rpx;

				.bottom {
					width: 100%;

					table {
						width: 100%;
						border-spacing: 30rpx;
						border-collapse: collapse;

						tr:last-child {
							border: transparent;
						}

						tr {
							height: 100rpx;
							border-bottom: 1rpx solid #E0E0E0;

							#con {
								text-align: right;
							}

							td {
								color: #2E7D32;

								.icon {
									display: flex;
									align-items: center;

									.icon-image {
										width: 37rpx;
										height: 37rpx;
										margin-right: 10rpx;
										filter: brightness(0.8); // 图标颜色加深
									}
								}
							}
						}
					}
				}
			}

			.button-box {
				.button {
					view {
						button {
							background: #fff;
							color: #2E7D32 !important; // 按钮文字与主色统一
							border: 0px solid red;

							&:active {
								background: #E8F5E9 !important; // 点击态浅绿背景
							}
						}
					}
				}
			}

			uni-button:after {
				content: ' ';
				width: 200%;
				height: 200%;
				position: absolute;
				top: 0;
				left: 0;
				border: 1rpx solid #E0E0E0;
				transform: scale(0.5);
				transform-origin: 0 0;
				box-sizing: border-box;
				border-radius: 0px;
			}

			.fenge-box {
				.fenge {
					width: 100%;
					height: 10rpx;
					background: #ededed;
				}
			}

			.touxiang-box {
				position: absolute;
				top: 261rpx;
				left: 310rpx;

				.touxiang {
					display: flex;
					flex-direction: column;
					align-items: center;

					text {
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #1B5E20; // 深绿文字
					}

					.image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 130rpx;
						border: 4rpx solid #C8E6C9; // 浅绿边框
					}
				}
			}
		}
	}
</style>